<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick" @tab-remove="handleTabsRemove">
      <el-tab-pane name="Home">
                <span slot="label">
                    <i class="el-icon-s-home">
                        <a href="#/home"></a>
                    </i>
                </span>
      </el-tab-pane>
      <el-tab-pane :closable="true" v-for="(tab) in tabList" :label="tab.title" :key="tab.name" :name="tab.component">
      </el-tab-pane>
      <!-- :key="tab.path"
      :name="tab.name"-->
    </el-tabs>

    <component :is="activeName" keep-alive></component>
    <!-- <router-view></router-view> -->
  </div>
</template>

<script>
import Home from '../home/Home'
import Edit from '../content/Edit'
import List from '../content/List'
// Quartz
import QuartzCal from '@/views/quartz/QuartzCal.vue'
import {mapMutations} from 'vuex'
// Threads
import ThreadCal from '@/views/threads/ThreadCal.vue';
import IotAdminView from "@/views/mqtt/Iot.vue";
import HealthyCateringMatchingView from "@/views/hcm/HealthyCMV.vue";
import HealthyFoodCatalogsView from "@/views/hcm/FoodCatalog.vue";
import FoodCalDayMapView from "@/views/hcm/FoodCalDayMap.vue";
import FoodCalDinnerMapView from "@/views/hcm/FoodCalDinnerMap.vue";
import ArticalDesFormView from "@/views/purm/ArticalDesForm.vue";
import VdesFormView from "@/views/purm/VdesFormV.vue";
import PurmFreelifeView from "@/views/purm/lfreeV.vue";
import PurmFreelifeVDBView from "@/views/purm/lfreeVDB.vue";
import PurmEvergreenWealthIncomeView from "@/views/purm/EgiV.vue";
import PurmMultiCurrencyPlanView from "@/views/purm/EgcV.vue";
import MembersView from "@/views/members/Members.vue";
import MemberLevelView from "@/views/members/MemberLevel.vue";
import MemberPointHistoryView from "@/views/members/MemberPointHistory.vue";
import MemberRewardStrategyView from "@/views/members/MemberRewardStrategy.vue";
import MemberWeightView from "@/views/hcm/MemberWeight.vue";
import WebSubjectView from "@/views/hcm/WebSubject.vue";
import WebProjectCampView from "@/views/hcm/WebProjectCamp.vue";
import SysDictsView from "@/views/sys/SysDicts.vue";
import PrintSettingView from "@/views/sys/PrintSetting.vue";
import CustDinnerMapView from "@/views/hcm/CustDinnerMap.vue";
import SupplyPrintingView from "@/views/hcm/SupplyPrinting.vue";
export default {
  name: 'Main',
  components: {
    Home,
    Edit,
    List,
    QuartzCal,
    ThreadCal,
    IotAdminView,
    PurmFreelifeView,
    PurmFreelifeVDBView,
    HealthyCateringMatchingView,
    HealthyFoodCatalogsView,
    FoodCalDayMapView,
    FoodCalDinnerMapView,
    PurmEvergreenWealthIncomeView,
    PurmMultiCurrencyPlanView,
    MembersView,
    MemberLevelView,
    MemberRewardStrategyView,
    MemberPointHistoryView,
    MemberWeightView,
    WebSubjectView,
    ArticalDesFormView,
    VdesFormView,
    WebProjectCampView,
    SysDictsView,
    PrintSettingView,
    CustDinnerMapView,
    SupplyPrintingView,
  },
  //浏览器刷新时保留store里的state
  created() {
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(
          Object.assign(
              {},
              this.$store.state,
              JSON.parse(sessionStorage.getItem('store'))
          )
      )
    }
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  },
  data() {
    return {}
  },
  methods: {
    ...mapMutations(['add_tab', 'remove_tab', 'set_active_name']),
    // eslint-disable-next-line no-unused-vars
    handleClick(tab, event) {
      //因为最开始的home就是激活的tabName，所以如果在其他路径下点击home要再设置一下
      if (tab.name === 'Home') {
        this.set_active_name('Home')
      }
      if (this.activeName === tab.name) return
      //切换tab
      this.set_active_name(tab.name)
    },
    handleTabsRemove(tab) {
      this.remove_tab(tab)
    },
    preLetterUpper(string) {
      return string.substring(0, 1).toUpperCase() + string.substring(1)
    },
  },
  computed: {
    menuList() {
      return this.$store.state.menuList
    },
    tabList() {
      return this.$store.state.tabList
    },
    activeName: {
      get() {
        return this.$store.state.activeName
      },
      set(val) {
        this.$store.commit('set_active_name', val)
      },
    },
  },
}
</script>

<style scoped>
</style>